/*
  学习目标：props的俩个特点
  步骤：
     1. props可以传递任意数据类型
          number string boolean null undefined object arr
          🔔 function  🔔 JSX
     2. props是只读的 - 类似vue中的单项数据流
*/

import React from 'react';

class App extends React.Component {
  render() {
    return (
      <div>
        <Child
          msg="msg"
          num={100}
          bl={true}
          nu={null}
          und={undefined}
          obj={{ name: 'zs', age: 20 }}
          arr={[1, 2, 3]}
          fn={() => {
            console.log('我是父组件的fn');
          }}
          jsx={<i>我是jsx</i>}
        ></Child>
      </div>
    );
  }
}

class Child extends React.Component {
  render() {
    const { msg, num, bl, nu, und, obj, arr, fn, jsx } = this.props;
    // console.log('bl, nu, und -----> ', bl, nu, und);
    // console.log('fn -----> ', fn);
    // fn();
    return (
      <div>
        <div>字符串: {msg}</div>
        <div>数字: {num}</div>
        <div>
          布尔: {bl} - {String(bl)}
        </div>
        <div>
          null: {nu} - {String(nu)}
        </div>
        <div>
          undefined: {und} - {String(und)}
        </div>
        {/* 对象 数组 */}
        <div>对象: {JSON.stringify(obj)}</div>
        <div>数组:{arr}</div>
        {/* 🔔 function  🔔 JSX */}
        <div onClick={fn}>点我调用fn</div>
        <div>jsx:{jsx}</div>
        {/* props是单向数据流，调用会报错，不能修改 props 的值 */}
        <div
          onClick={() => {
            this.props.msg = '我想修改props的值';
          }}
        >
          点我修改props的值
        </div>
      </div>
    );
  }
}

export default App;
